<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="shopcart" class="shop-cart">
    <div class="tabs">
      <div class="border">
        <!-- data-*表示自定义属性。 -->
        <div class="title" :class="{active:num==index}" data-index="0" v-for="(top,index) in tops" :key="top.id"
          @mouseenter="changesty(index)">
          {{top.topname}}
          <span class="count">{{top.count}}</span>
        </div>
        <!-- <div class="title" data-index="1">
          降价商品
          <span class="count">0</span>
        </div>
        <div class="title last" data-index="2">
          库存紧张
          <span class="count">0</span>
        </div> -->
        <div class="line" :style="{left:offsetWidth}"></div>
      </div>
    </div>

    <!-- 199010119曾讯 -->
    <div class="lists">
      <div class="header">
        <ul class="clearfix">
          <li>
            <!-- <input type="checkbox" class="select-all" @click="selectAll" v-model="selectall"> -->
            <span class="borw" @click="allCheckeds()" :class="[yallChecked?'borw-ye':'']"></span>
            <label>全选</label>
          </li>
          <li class="product-info">商品信息</li>
          <li>单价</li>
          <li>数量</li>
          <li>金额</li>
          <li>操作</li>
        </ul>
      </div>

      <div id="shoplist" class="shoplist">
        <!-- 店铺内容及样式参考 -->

        <div class="shop" v-for="(item,index) in shopcarts" :key="item.shopId">
          <div class="shop-info">
            <!-- <input type="checkbox" v-model="item.isChecked" @click="shopselect(item)"> -->
            <span class="borw" :class="[item.isChecked?'borw-ye':'']" @click="shopSelect(item)"></span>
            <span class="shop-tip">店铺：</span>
            <a class="shop-name" href="#">{{item.shopName}}</a>
            <a href="#" class="wangwang">旺旺</a>
          </div>
          <div class="products" v-for="(uitem,index) in item.products" :key="uitem.productId"
            :class="{productsColor:(index+1) % 2 ==0}">
            <div class="item">
              <div class="select-logo">
                <!-- <input type="checkbox" v-model="uitem.isChecked"> -->
                <span class="borw" :class="[uitem.isChecked?'borw-ye':'']" @click="goodSelect(item,uitem)"></span>
                <img :src="uitem.topImg" alt="产品logo">
              </div>
              <div class="product-detail">
                <div class="left">
                  <a href="#" class="product-name">
                    {{uitem.productName}}
                  </a>
                  <div class="logos">
                    <a href="#" class="card">信用卡</a>
                    <a href="#" class="service">保障服务</a>
                    <a href="#" class="order">订单险</a>
                    <a href="#" class="seven">7天无理由</a>
                  </div>
                </div>
                <div class="right" v-html="uitem.spec">
                </div>
              </div>
              <div class="price">
                <p class="market-price">￥{{uitem.marketPrice}}</p>
                <p class="real-price">￥{{uitem.price}}</p>
              </div>
              <div class="count">
                <span class="sub" @click="sub(uitem)">-</span>
                <span class="input"><input type="text" v-model="uitem.count"></span>
                <span class="add" @click="add(uitem)">+</span>
              </div>
              <div class="amount">￥{{uitem.price*uitem.count}}</div>
              <div class="delete">
                <a href="#" @click="removegood(item,uitem)">删除</a>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="operate">
      <div class="left">
        <!-- <input type="checkbox" class="select-all-footer" v-model="selectall" @click="selectAll"> -->
        <span class="borw"></span>
        <a href="javascript:void(0);">删除</a>
      </div>

      <div class="right">
        <div>已选择商品<span class="selected-count">{{totalCount}}</span>件</div>
        <div class="amount">合计（不含运费）： <span class="sum">￥{{totalPrice}}</span></div>
        <a href="javascript:void(0);" class="settle">结算</a>
      </div>
    </div>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="./js/data.js"></script>
  <script>

  </script>
</body>

</html>